/* 
用Vue.js+Vue Router创建但也
使用VUE.js,我们可以通过组合组件来组成应用程序
当你要把Vue Router添加进来，我们需要做的事，将组件
映射到路由（routers)，然后告诉Vue Router在哪里渲染它们
*/
const Foo = {template:'<div>foo</div>'}
const Bar = {template:'<div>bar</div>'}
const routes = [
    {path:'/foo',component:Foo},
    {path:'/bar',component:Bar}
]
const router = new VueRouter({
    routes
})
const app = new Vue({
    router
}).$mount('#app')
/* 
通过注入路由器，我们可以在任何组件内通过this.$router访问路由器
，也可以通过this.$router
*/
export default{
    computed:{
        username(){
            return this.$route.params.username
        }
    },
    methods:{
        goBack(){
            window.history.length>1? this.$router.go(-1):this.$router.push("/")
        }
    }
}
/* 
该文档通篇都常使用router实例。留意一下this.$router和router使用
起来完全一样使用this.$router的原因是我们并不想再每个独立
需要封装路由的组件中都导入路由
要注意，当<router-link>对应的路由匹配成功，将自动设置
class属性值 .router-link-active。
使用this.$router的原因是我们并不想在每个独立需要封装路由
组件中都导入路由
要注意，当<router-link>对应的路由匹配成功，将自动设置clas
属性值.router-link-active。
要注意，当<router-link>对应的路由匹配成功，将自动设置class
属性值.router-link-active。

*/
